<template>
<div id="Container">
    <p class="Message">{{ lang.initialize_mode_message }}</p>
    <div id="Items" :style="{flexDirection: lang.rtl ? 'row-reverse' : 'row'}">
        <router-link id="Item" v-for="item in items" :key="item.id" :to="{name: item.name}">
            <img class="image" :src="imageUrl(item.icon)">
            <p class="label">{{ item.text() }}</p>
        </router-link>
    </div>
</div>
</template>


<script>
export default {
  methods: {
    imageUrl(name) {
      //   return `url("static/img/${name}")`
      return `static/img/${name}`;
    }
  },
  computed: {
    lang() {
      return this.$store.state.lang;
    },
    items() {
      return [
        {
          id: 0,
          icon: "pencil.svg",
          text: () => this.lang.i_m_a_web_server_manualy_mode,
          name: "FromManualy"
        },
        {
          id: 1,
          icon: "network.svg",
          text: () => this.lang.web_server_sync_mode,
          name: "FromSync"
        },
        {
          id: 2,
          icon: "local.png",
          text: () => this.lang.upload_local_data_mode,
          name: "FromLocal"
        }
      ];
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/colors";

#Container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  overflow: auto;
}
.Message {
  color: $color-primary;
  font-size: 16px;
  text-align: center;
  padding: 20px;
}
#Items {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;

  #Item {
    width: 150px;
    margin: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .image {
      // align-self: flex-start;
      width: 60px;
      height: 60px;
      //   background-position: center;
      //   background-size: 100% 100%;
      //   background-repeat: no-repeat;

      //   border: {
      //       width: 0px;
      //   }
    }
    .label {
      font-size: 14px;
      text-align: center;
      // align-self: flex-end;
      color: $color-fore;
    }
  }
}
</style>
